<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no'
          name='viewport'/>
    <title>马思特奥赛培训学校网络管理系统</title>
    <link rel="stylesheet" type="text/css" th:href="@{/webjars/bootstrap/3.3.7/css/bootstrap.min.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/asserts/css/demo.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/asserts/css/ready.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/css/element-ui.css}">

    <style>
        th, td {
            text-align: center
        }

        a:hover {
            text-decoration: none
        }
    </style>
</head>
<body>
<div class="wrapper" id="app">
    <div th:replace="student/public-student-index :: header"></div>

    <div th:replace="student/public-student-index :: left"></div>

    <div class="main-panel">
        <div class="content">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">课程名称：
                        <span id="project_Name" style="color: #dd6161;font-size: 13pt" th:text="${projectName}"></span>
                        <span id="project_id" style="color: #dd6161; display: none" th:text="${project_id}"></span>
                    </h3>
                </div>
                <div class="panel-body">
                    请下载该课程附件查看作业需求：
                    <el-link :underline="false" style="font-weight: bold;">
                        <a th:href="@{/static/file_download(project_Name=${projectName})}">
                            下载附件
                        </a>
                    </el-link>
                    <span th:if="${myflag} eq 1">
                    <input type="file" multiple="multiple" id="myFiles" style="width: 100px;height: 25px;">
                    <input type="button" value="上传" id="upload-test"
                           style="width: 100px;height: 25px;background-color: cornsilk;">
                        </span>
                    <div style="float: right">
                        <!--                        <span th:if="${myflag} eq 1">-->
                        <!--                            <el-button @click.native="upload-test" id="upload-test">-->
                        <!--                            上传作业-->
                        <!--                            </el-button>-->
                        <!--                            </span>-->
                        <!--                        </span>-->
                        <span>
                            <el-button id="mflag" @click="test1" th:value="${myflag}">
                            <span th:if="${myflag} eq 0">加入课程</span>
                            <span th:if="${myflag} eq 1">取消加入</span>
                            <span th:if="${myflag} eq 2">撤销上传</span>
                            <span th:if="${myflag} eq 3">查看成绩</span>
                            </el-button>
                        </span>
                    </div>
                </div>
            </div>
            <table class="table table-bordered table-hover" style="background-color:white;">

                <tr class="danger">
                    <th>序号</th>
                    <th>班级</th>
                    <th>学号</th>
                    <th>姓名</th>
                    <th>课程</th>
                    <th>状态</th>
                </tr>

                <tr th:each="list,iterStar : ${topicstos}">
                    <td th:text="${iterStar.count}">${status.count}</td>
                    <td th:text="${list.className}">${project.className}</td>
                    <td th:text="${list.stuNum}">${project.stuNum}</td>
                    <td th:text="${list.name}">${project.name}</td>
                    <td th:text="${projectName}">${projectName}</td>
                    <td th:if="${list.stuSelectFlag==0}">未加入</td>
                    <td th:if="${list.stuSelectFlag==101}">已加入</td>
                    <td th:if="${list.stuSelectFlag==2}">待批阅</td>
                    <td th:if="${list.stuSelectFlag==3}">已批阅</td>
                    <!--                    表格-->
                </tr>
            </table>
        </div>
    </div>
</div>


</body>
<script type="text/javascript" th:src="@{/webjars/jquery/1.9.1/jquery.js}"></script>
<script type="text/javascript" th:src="@{/webjars/bootstrap/3.3.7/js/bootstrap.min.js}"></script>
<script type="text/javascript" th:src="@{/asserts/js/ready.min.js}"></script>
<!--<script type="text/javascript" th:src="@{/js/topics.js}"></script>-->
<script type="text/javascript" th:src="@{/js/Vue.js}"></script>
<script type="text/javascript" th:src="@{/js/element-ui.js}"></script>

<script th:inline="javascript" type="text/javascript">

    var basePath = /*[[${#httpServletRequest.getContextPath()}]]*/'ContextPath';

    var app = new Vue({
        el: "#app",
        data() {
            return {
                show: false
            }
        },
        methods: {
            test1() {
                var mflag = [[${myflag}]]
                if ($('#mflag').val() == "0") {
                    var project_id = $("#project_id").html();
                    $.ajax({
                            url: basePath + '/student/enroll',
                            dataType: 'json', //表示返回值的数据类型
                            contentType: 'application/json;charset=UTF-8', //内容类型
                            data: {"project_id": project_id},
                            success: function (res) {
                                if (res == 200) {
                                    alert("加入成功，请按要求上传作业！");
                                    // $('#xb').html("取消选报");
                                    window.location.reload();
                                }
                                if (res == 101) {
                                    alert("不能重复选择！")
                                }
                            }
                        }
                    );
                } else if ($('#mflag').val() == "1") {
                    var project_id = $("#project_id").html();
                    $.ajax({
                            type: 'GET',//DELETE
                            url: basePath + '/student/cancelproject',
                            dataType: 'json', //表示返回值的数据类型
                            contentType: 'application/json;charset=UTF-8', //内容类型
                            data: {"project_id": project_id},
                            success: function (res) {
                                if (res == 200) {
                                    alert("取消加入成功！");
                                    $('#xb').html("加入");
                                    window.location.reload();//偷懒做的
                                }
                                if (res == 203) {
                                    alert("取消加入失败！");
                                }
                            }
                        }
                    );
                }
            },
        }
    })
    // 点击上传按钮，执行上传操作
    // 注: 参数 uploadSuccess uploadFail 是文件上传成功和失败执行方法的方法名
    $("#upload-test").on("click", function () {
        // 方式一
        var url = '${pageContext.request.contextPath}/XXX/uploadFile.koala';
        var obj = document.getElementById("myFiles");
        var len = obj.files.length;
        for (var i = 0; i < len; i++) {  // 这个里面可以根据自己的需要对文件进行过滤判断等操作
            var fileName = obj.files[i].name;
            uploadFile(url, obj.files[i]);   // 执行单个文件的上传(每次都创建一个新的 form,并提交)
        }
    })
    // ajax 上传单个文件对象
    // url 为访问路径
    // files 为上传文件数组
    // success 为上传成功后执行方法
    // fail 为上传文件失败执行的方法
    function uploadFile(url, file, success, fail) {
        var form = new FormData();
        form.append("file", file);
        $.ajax({
            url: basePath + '/cos/upload',        //后台url
            data: form,
            cache: false,
            async: true,
            type: "POST",
            dataType: 'json',              //数据返回类型，可以是xml、json等
            processData: false,
            contentType: false,
            success: function () {      //成功，回调传来的success方法
                uploadSuccess();
            },
            error: function () {          //失败，回调函数
                uploadFail();
            }
        });
    }

    function uploadSuccess() {
        alert("上传文件成功")
    }

    function uploadFail() {
        alert("上传文件失败")
    }

</script>

</html>
